<template>
    <div id="player">
        <div class="changeColor">
            <div class="color" style="background-color: #409EFF;" @click="changeColor('#409EFF','#00c6ae')"></div>
            <div class="color" style="background-color: #00c6ae;" @click="changeColor('#00c6ae','#409EFF')"></div>
            <div class="color" style="background-color: pink;" @click="changeColor('pink','#ff4f60')"></div>
            <div class="color" style="background-color: #ff4f60;" @click="changeColor('#ff4f60','pink')"></div>
            <div class="color" style="background-color: #fff4cc;" @click="changeColor('#fff4cc','#ffca95')"></div>
        </div>

        <div style="position: relative;">

            <div class="playerPage">

                <div class="pageone">
                    <div class="meetbtn" @click="next">MEET</div>
                </div>


                <div class="pagetwo">

                    <div class="pagetwoLeft">
                        <div style="display: flex;height: 10%;">
                            <div class="gobackBtn" @click="gobackMeet">
                                <i class="el-icon-arrow-left"></i>
                            </div>
                            <div class="titleTxt">选择你的MEET主题</div>
                        </div>

                        <div style="height: 75%;margin-top: 20%;">
                            <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/p1.png')"
                                fit="cover">
                            </el-image>
                        </div>
                    </div>

                    <div class="pagetwoRight">
                        <div class="chooseyourtheme">
                            <div class="theme thappy" @click="choosetheme('happy')">
                                <div>happy</div>
                                <div class="choosed" v-if="ishappy">
                                    <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/check.png')"
                                        fit="cover">
                                    </el-image>
                                </div>
                            </div>
                            <div class="theme tsad" @click="choosetheme('sad')">
                                <div>sad</div>
                                <div class="choosed" v-if="issad">
                                    <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/check.png')"
                                        fit="fill">
                                    </el-image>
                                </div>
                            </div>
                            <div class="theme tsweet" @click="choosetheme('sweet')">
                                <div>sweet</div>
                                <div class="choosed" v-if="issweet">
                                    <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/check.png')"
                                        fit="fill">
                                    </el-image>
                                </div>
                            </div>
                            <div class="theme tsweet" @click="choosetheme('sweet')">
                                <div v-if="ishappy&&issad&&issweet">这...会不会选得有点多了啊</div>
                                <div v-else-if="ishappy&&issad">有时候总是痛并快乐着</div>
                                <div v-else-if="ishappy&&issweet">噢，这该死的甜美爱情！</div>
                                <div v-else-if="issad&&issweet">痛，太痛了！</div>
                                <div v-else-if="ishappy">嘿嘿嘿</div>
                                <div v-else-if="issad">我的悲伤是水做的TAT</div>
                                <div v-else-if="issweet">爱是人类永恒的主题！</div>
                            </div>
                            <!-- <div class="theme thigh" @click="choosetheme('high')">
                                <div>high</div>
                                <div class="choosed" v-if="ishigh">
                                    <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/check.png')"
                                        fit="fill">
                                    </el-image>
                                </div>
                            </div> -->
                        </div>

                        <div class="gopalyerBtn" @click="goplayer" v-if="isNextShow">Next</div>

                    </div>


                </div>


                <!-- 播放器页 -->
                <div class="pagethree">
                    <div class="player">
                        <!-- 音乐 -->
                        <audio :src="this.song.songSrc"></audio>

                        <!-- 返回主题页 -->
                        <div class="backTheme" @click="gobackTheme">
                            <i class="el-icon-back" style="font-size: 1.5rem;font-weight: 600;"></i>
                        </div>

                        <!-- 分享 -->
                        <div class="backTheme" style="left: 80px;" @click="share">
                            <i class="el-icon-share" style="font-size: 1.5rem;font-weight: 600;"></i>
                        </div>

                        <!-- 收藏 -->
                        <div class="backTheme" style="left: 130px;" @click="collection">
                            <i class="el-icon-star-on" style="font-size: 1.5rem;font-weight: 600;"></i>
                        </div>



                        <!-- 专辑图 -->
                        <div class="songImg">
                            <el-image style="width: 100%; height: 100%" :src="song.songImg" fit="cover">
                            </el-image>
                        </div>

                        <!-- 歌曲信息 -->
                        <div class="songMsg">
                            <!-- 歌名 -->
                            <div class="songName">{{song.songName}}</div>

                            <!-- 歌手 -->
                            <div class="singer">{{song.songSinger}}</div>
                        </div>

                        <!-- 滚动歌词 -->
                        <div class="lyric">
                            <div class="rollLyric">
                                <!-- <el-button @click="roll">one</el-button> -->
                                <div class="movearea">
                                    <ul class="lrcul">

                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- 控制台 -->
                        <div class="contrl">
                            <!-- 播放键 -->
                            <div class="play" @click="songPause" v-if="songPlayFlag"><i class="el-icon-video-pause"
                                    style="font-size: 2rem;font-weight: 600;"></i>
                            </div>
                            <div class="play" @click="songPlay" v-if="!songPlayFlag"><i class="el-icon-video-play"
                                    style="font-size: 2rem;font-weight: 600;"></i>
                            </div>
                            <!-- 下一首 -->
                            <div class="nextSong"><i class="el-icon-d-arrow-right"
                                    style="font-size: 1.6rem;font-weight: 600;" @click="nextsong"></i></div>
                            <!-- 滚动 -->
                            <div class="contrler">
                                <el-slider v-model="whenSong" :max="maxSong" @change="playThis()" :show-tooltip="false">
                                </el-slider>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            <div class="one">
                <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/齿轮.png')" fit="cover">
                </el-image>
            </div>

            <div class="two">
                <el-image style="width: 100%; height: 100%" :src="require('@/assets/img/齿轮.png')" fit="cover">
                </el-image>
            </div>

            <div class="title">
                <div>MEETMUSIC</div>
            </div>

            <div class="title2" style="width: 60px;left: 400px;padding: 10px 0;" @click="money">
                <div style="width: 20px;">赞助作者</div>
            </div>

            <div class="title3" style="width: 60px;left: 485px;padding: 10px 0;" @click="bugTell">
                <div style="width: 20px;">问题反馈</div>
            </div>

            <div class="footer"></div>

        </div>

        <div class="black" v-if="showQrcode">
            <div class="qrcode">
                <div style="width: 90%;cursor: pointer;text-align: center;" @click="showQrcode = false"><i
                        class="el-icon-circle-close" style="float: right;font-size: 30px;"></i>分享功能暂未开启</div>
                <vue-qr :size="240" text="该功能暂未开启"></vue-qr>
                <!-- <div style="font-size: 20px;font-weight: 600;border-bottom: 4px solid rgba(0, 0, 0, 0.3);">分享功能暂未开启
                </div> -->
            </div>
        </div>

    </div>
</template>

<script>
    import VueQr from 'vue-qr'
    import Lyric from 'lyric-parser'
    import axios from 'axios'

    export default {
        name: 'Player',
        data() {
            return {
                // colorFlag: falses
                ishappy: false,
                issweet: false,
                issad: false,
                // ishigh: false,
                isNextShow: false,
                // 当前播放至 s
                whenSong: 0,
                // 歌曲播放旗子
                songPlayFlag: false,
                //歌曲播放计时器
                playTime: '',
                // 歌曲最大时间
                maxSong: 0,
                // 当前播放时间
                currenttime: 0,
                // 模态框
                showQrcode: false,
                // 歌词
                lrc: '',
                //获取Lyric对象
                currentLyric: '',
                // 所有li
                lis: [],
                // 当前播放第几条歌词
                nowlrc: -1,
                // 歌曲信息
                song: {
                    'songName': '',
                    'songImg': '',
                    'songSinger': '',
                    'songSrc': ''
                },
                // 随机歌曲旗子
                rnum: 0,
                // 请求接口
                getWhere: '',
            }
        },
        mounted() {
            // 请求数据库获取歌曲
            // this.getsong()
            this.lis = document.getElementsByTagName('li')
        },
        components: {
            VueQr
        },
        watch: {
            // 齿轮动画监听
            songPlayFlag: function(val) {
                let one = document.querySelector('.one')
                let two = document.querySelector('.two')
                if (val) {
                    one.classList.add('rotating')
                    two.classList.add('rotating2')
                } else {
                    one.classList.remove('rotating')
                    two.classList.remove('rotating2')
                }
            },
            // 选中歌词
            nowlrc: function(val) {
                let movearea = document.querySelector('.movearea')
                // console.log(val)
                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].style = ''
                }
                if (val == 0) {
                    this.lis[val].style.fontSize = '23px'
                    this.lis[val].style.color = '#000'
                    this.lis[val].style.margin = '15px 0'
                    this.lis[val].style.backgroundColor = 'rgba(0, 0, 0, 0.1)'
                    movearea.style.top = '0px'
                } else if (val > 3) {
                    this.lis[val].style.fontSize = '23px'
                    this.lis[val].style.color = '#000'
                    this.lis[val].style.margin = '15px 0'
                    this.lis[val].style.backgroundColor = 'rgba(0, 0, 0, 0.1)'
                    // 歌词滚动
                    movearea.style.top = (-val + 2) * 30.8 + 'px'
                } else if (val > 0) {
                    this.lis[val].style.fontSize = '23px'
                    this.lis[val].style.color = '#000'
                    this.lis[val].style.margin = '15px 0'
                    this.lis[val].style.backgroundColor = 'rgba(0, 0, 0, 0.1)'
                    movearea.style.top = '0px'
                }
            }
        },
        methods: {
            // 获取歌曲数据
            getsong() {
                axios.get(this.getWhere).then(res => {
                    this.rnum = Math.round(Math.random() * (res.data.length - 1))
                    // console.log(this.rnum)
                    // 歌曲信息赋值
                    this.lrc = res.data[this.rnum].music_lrc
                    this.song.songName = res.data[this.rnum].music_name
                    this.song.songSinger = res.data[this.rnum].music_singer
                    this.song.songImg = res.data[this.rnum].music_img
                    this.song.songSrc = res.data[this.rnum].music_src
                    // 解析歌词
                    this.currentLyric = new Lyric(this.lrc, this.lyricHandle)
                    // 渲染歌词
                    this.getAllLyr()
                }).catch(err => {
                    console.log("获取数据失败" + err);
                })
            },

            // 歌词渲染
            getAllLyr() {
                let lrcul = document.querySelector('.lrcul')
                lrcul.innerHTML = ''
                this.currentLyric.lines.forEach((item, index) => {
                    let oneli = document.createElement('li')
                    oneli.innerHTML = `${item.txt}`
                    lrcul.appendChild(oneli)
                })
            },

            // 歌词回调
            lyricHandle({
                lineNum,
                txt
            }) {
                this.nowlrc = lineNum
            },

            // 判断条件获取歌曲信息
            themeChoose() {
                if (this.ishappy && this.issad && this.issweet) {
                    this.getWhere = 'http://localhost:3060/getall'
                } else if (this.ishappy && this.issad) {
                    this.getWhere = 'http://localhost:3060/gethappy_sad'
                } else if (this.ishappy && this.issweet) {
                    this.getWhere = 'http://localhost:3060/gethappy_sweet'
                } else if (this.issad && this.issweet) {
                    this.getWhere = 'http://localhost:3060/getsad_sweet'
                } else if (this.ishappy) {
                    this.getWhere = 'http://localhost:3060/gethappy'
                } else if (this.issad) {
                    this.getWhere = 'http://localhost:3060/getsad'
                } else if (this.issweet) {
                    this.getWhere = 'http://localhost:3060/getsweet'
                }
            },

            // 前往主题页
            next() {
                let pageone = document.querySelector('.pageone')
                pageone.style.left = '-650px'
                let pagetwo = document.querySelector('.pagetwo')
                pagetwo.style.left = '0px'
                let pagethree = document.querySelector('.pagethree')
                pagethree.style.left = '650px'
            },
            // 返回第一页
            gobackMeet() {
                let pageone = document.querySelector('.pageone')
                pageone.style.left = '0px'
                let pagetwo = document.querySelector('.pagetwo')
                pagetwo.style.left = '650px'
                let pagethree = document.querySelector('.pagethree')
                pagethree.style.left = '1300px'
            },
            // 前往播放器
            goplayer() {
                let pageone = document.querySelector('.pageone')
                pageone.style.left = '-1300px'
                let pagetwo = document.querySelector('.pagetwo')
                pagetwo.style.left = '-650px'
                let pagethree = document.querySelector('.pagethree')
                pagethree.style.left = '0px'
                // 清除原数据
                this.maxSong = 0
                this.nowlrc = -1
                this.song = {
                    'songName': '',
                    'songImg': '',
                    'songSinger': '',
                    'songSrc': ''
                }
                this.currenttime = 0
                // 主题判断
                this.themeChoose()
                this.getsong()
            },
            // 返回第二页
            gobackTheme() {
                let pageone = document.querySelector('.pageone')
                pageone.style.left = '-650px'
                let pagetwo = document.querySelector('.pagetwo')
                pagetwo.style.left = '0px'
                let pagethree = document.querySelector('.pagethree')
                pagethree.style.left = '650px'
                this.songPause()
            },
            // 改变背景色
            changeColor(color, leftcolor) {
                document.querySelector('.pagetwoLeft').style.backgroundColor = leftcolor
                document.querySelector('.pagethree').style.backgroundColor = leftcolor
                document.querySelector('.pageone').style.backgroundColor = leftcolor
                document.querySelector('#player').style.backgroundColor = color
            },
            // 主题选择
            choosetheme(ischoose) {
                switch (ischoose) {
                    case 'happy':
                        this.ishappy = !this.ishappy
                        break;
                    case 'sad':
                        this.issad = !this.issad
                        break;
                    case 'sweet':
                        this.issweet = !this.issweet
                        break;
                    case 'high':
                        this.ishigh = !this.ishigh
                        break;
                    default:
                        break;
                }

                if (this.ishappy || this.issad || this.ishigh || this.issweet) {
                    this.isNextShow = true
                } else {
                    this.isNextShow = false
                }

            },
            // 开始播放
            songPlay() {
                // 开始播放
                let audio = document.querySelector('audio')
                this.whenSong = parseInt(audio.currentTime)
                this.maxSong = parseInt(audio.duration)
                console.log(this.maxSong)

                audio.play()
                this.songPlayFlag = true
                // 计算当前播放进度
                this.playTime = setInterval(() => {
                    this.whenSong += 1
                    if (this.whenSong == parseInt(audio.duration)) {
                        this.songPlayFlag = false
                        this.whenSong = parseInt(audio.duration)
                    }
                }, 1000)
                this.gear = true
                // 歌词开始滚动
                // this.currentLyric.play()
                this.currentLyric.seek(audio.currentTime * 1000)

            },
            // 暂停播放
            songPause() {
                clearInterval(this.playTime)
                let audio = document.querySelector('audio')
                audio.pause()
                this.songPlayFlag = false
                // 歌词停止滚动
                this.currentLyric.stop()
            },

            //下一首
            nextsong() {
                this.songPause()
                this.goplayer()
            },

            // 滑动播放
            playThis() {
                let audio = document.querySelector('audio')
                audio.currentTime = this.whenSong
                this.currentLyric.seek(audio.currentTime * 1000)
            },

            // 收藏按钮事件
            collection() {
                this.$message({
                    message: '收藏功能暂未开启',
                    type: 'info'
                });
            },

            // 分享
            share() {
                this.showQrcode = true
            },
            
            // 赞助作者
            money() {
                this.$message({
                    message: '我是自愿用爱发电的（坚定）',
                    type: 'warning'
                });
            },
            
            
            // bug反馈
            bugTell() {
                this.$alert('作者邮箱：13324879121@163.com', 'bug反馈', {
                    confirmButtonText: '确定',
                });
            }


        }
    }
</script>

<style lang="scss">
    #player {
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #409EFF;
        position: relative;
        // background-color: #ffa5f3;

        // 黑幕
        .black {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
        }

        // 二维码
        .qrcode {
            position: absolute;
            top: calc((100vh - 350px)/2);
            left: calc((100vw - 350px)/2);
            width: 350px;
            height: 350px;
            background-color: #fff;
            z-index: 3;
            border-radius: 15px;
            border: 4px solid #000;
            border-bottom: 8px solid #000;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding-bottom: 35px;
        }


        .one {
            position: absolute;
            right: -130px;
            top: 20px;
            width: 300px;
            height: 300px;
            // background-color: #ff0;
            z-index: 0;
        }

        .two {
            position: absolute;
            right: -30px;
            top: 295px;
            width: 100px;
            height: 100px;
            // background-color: #ff0;
            z-index: 0;

        }

        // 脚注
        .footer {
            position: absolute;
            right: 0px;
            bottom: -50px;
            width: 650px;
            height: 50px;
            // background-color: #ff0;
            z-index: 0;
            text-align: center;
            line-height: 50px;
            font-weight: 600;
        }

        .title,
        .title2,
        .title3 {
            position: absolute;
            left: 70px;
            top: -60px;
            width: 300px;
            height: 150px;
            background-color: #d1d1d1;
            z-index: 0;
            border: 4px solid #000;
            border-radius: 15px;
            text-align: center;
            padding: 17px 0;
            font-size: 20px;
            font-weight: 600;
            transition: all .3s;
            display: flex;
            justify-content: center;
            // align-items: center;
        }

        .title2:hover,
        .title3:hover {
            cursor: pointer;
            top: -120px;
        }

        .rotating {
            animation: rotating 7s linear infinite;
        }

        .rotating2 {
            animation: rotating2 7s linear infinite;
        }

        @keyframes rotating {
            from {
                transform: rotate(0)
            }

            to {
                transform: rotate(360deg)
            }
        }

        @keyframes rotating2 {
            from {
                transform: rotate(360deg)
            }

            to {
                transform: rotate(0)
            }
        }


        .changeColor {
            .color {
                cursor: pointer;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                margin-bottom: 20px;
                transition: all .3s;
                border: 3px solid #000;
                border-bottom: 5px solid #000;

                &:hover {
                    transform: scale(1.15);
                }
            }
        }


        .playerPage {
            width: 650px;
            height: 450px;
            border: 4px solid #000;
            border-bottom: 10px solid #000;
            border-radius: 30px;
            margin-left: 20px;
            position: relative;
            overflow: hidden;
            z-index: 1;

            .pageone,
            .pagetwo,
            .pagethree {
                width: 650px;
                height: 450px;
                position: absolute;
                transition: all .6s;
                z-index: 1;
            }

            // 第一页 按钮
            .pageone {
                background-color: #00c6ae;
                left: 0;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                // border: 10px solid #000;

                .meetbtn {
                    cursor: pointer;
                    width: 200px;
                    border: 3px solid #000;
                    border-top: 5px solid #000;
                    border-bottom: 8px solid #000;
                    border-radius: 15px;
                    font-size: 3rem;
                    text-align: center;
                    background-color: #fff;
                    text-shadow: 0px 2px 3px #cb960e;
                    background-image: linear-gradient(180deg, #ffbc12, #e3a30d, #ffbc12);

                    &:hover {
                        border-top: 8px solid #000;
                        border-bottom: 4px solid #000;
                    }
                }
            }

            // 第二页 主题选择
            .pagetwo {
                background-color: #fff;
                left: 650px;
                // left: 0px;
                top: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;

                .pagetwoLeft {
                    width: 50%;
                    height: 100%;
                    background-color: #00c6ae;
                    padding: 20px;
                    padding-bottom: 0;
                    transition: all .6s;

                    .gobackBtn {
                        cursor: pointer;
                        background-color: #fff;
                        border-radius: 50%;
                        height: 40px;
                        width: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 2px solid #000;
                        border-bottom: 4px solid #000;
                        transition: all .3s;

                        &:hover {
                            transform: scale(1.15);
                        }
                    }

                    .titleTxt {
                        font-weight: 600;
                        margin-left: 20px;
                        width: 70%;
                        font-size: 1.4rem;
                        border-bottom: 6px solid rgba(0, 0, 0, 0.3);
                    }
                }

                .pagetwoRight {
                    width: 50%;
                    height: 100%;
                    background-color: #fff;

                    .chooseyourtheme {
                        margin-top: 20px;
                        height: 70%;
                        // background-color: #ff0;

                        .theme {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            width: 100%;
                            height: 25%;
                            font-size: 1.5rem;
                            font-weight: 700;
                            text-shadow: 0px 3px 4px rgba(60, 154, 241, 0.3);
                            color: #909090;
                            transition: all .3s;

                            &:hover {
                                transform: scale(1.15);
                            }

                            .choosed {
                                border-radius: 50%;
                                margin-left: 10px;
                                width: 30px;
                                height: 30px;
                            }
                        }
                    }


                    .gopalyerBtn {
                        cursor: pointer;
                        text-align: center;
                        width: 100px;
                        margin: 30px auto;
                        padding: 5px 0;
                        font-size: 1.5rem;
                        background-color: #e7e7e7;
                        border-radius: 7px;
                        border: 3px solid #000;
                        border-bottom: 6px solid #000;
                        transition: all .3s;
                        font-weight: 600;

                        &:hover {
                            transform: scale(1.15);
                        }
                    }

                }
            }

            .pagethree {
                background-color: #00c6ae;
                // left: 0px;
                left: 1300px;
                top: 0;

                .player {
                    width: 100%;
                    height: 100%;
                    position: relative;

                    // 返回按钮
                    .backTheme {
                        background-color: rgba(255, 255, 255, 0.9);
                        width: 35px;
                        height: 35px;
                        border-radius: 10px;
                        border: 2px solid #000;
                        border-bottom: 4px solid #000;
                        position: absolute;
                        left: 30px;
                        top: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        transition: all .3s;

                        &:hover {
                            transform: scale(1.15);
                        }

                    }

                    // background-color: #ff0;
                    .songImg {
                        width: 230px;
                        height: 230px;
                        border-radius: 12px;
                        border: 4px solid #000;
                        border-bottom: 8px solid #000;
                        position: absolute;
                        left: 30px;
                        top: 70px;
                        overflow: hidden;
                    }

                    .songMsg {
                        position: absolute;
                        left: 35px;
                        top: 320px;
                        width: 230px;

                        .songName {
                            font-size: 1.2rem;
                            font-weight: 700;

                        }

                        .singer {
                            color: #5e5e5e;
                            font-weight: 600;
                            margin-top: 20px;
                        }
                    }

                    // 歌词
                    .lyric {
                        width: 330px;
                        height: 280px;
                        background-color: rgba(255, 255, 255, 0.9);
                        position: absolute;
                        right: 30px;
                        top: 20px;
                        border-radius: 10px;
                        border: 4px solid #000;
                        border-bottom: 8px solid #000;
                        padding: 15px 20px;
                        font-weight: 600;
                        overflow: hidden;

                        li {
                            list-style: none;
                            color: #9f9f9f;
                            border-radius: 5px;
                            padding: 5px;
                        }


                        .rollLyric {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            position: relative;

                            .movearea {
                                transition: all .2s;
                                position: absolute;
                                top: 0;
                                left: 0;
                            }
                        }




                    }

                    // 控制台
                    .contrl {
                        background-color: rgba(255, 255, 255, 0.9);
                        width: 330px;
                        height: 110px;
                        padding: 10px 0;
                        position: absolute;
                        right: 30px;
                        top: 310px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                        border-radius: 10px;
                        border: 4px solid #000;
                        border-bottom: 8px solid #000;

                        .play,
                        .nextSong {
                            cursor: pointer;
                            width: 50px;
                            height: 50px;
                            background-color: rgba(255, 255, 255, 0.9);
                            border-radius: 10px;
                            // text-align: center;
                            // line-height: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            border: 2px solid #000;
                            border-bottom: 4px solid #000;
                            font-size: 1.3rem;
                            font-weight: 600;
                            margin: 0 10px;
                            transition: all .3s;

                            &:hover {
                                transform: scale(1.15);
                            }
                        }

                        .contrler {
                            width: 90%;

                        }
                    }

                }
            }

        }


    }
</style>
